
.codeWhite {
  background: #fff;
  box-shadow: 0 18px 35px rgba(50, 50, 93, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);

  :global {
    .code-wrap { 
      .code-wrap-inner {
        background: transparent;

        .code-dots {
          border-bottom: 1px solid #ffffff1f;
          background: transparent;

          .dot-red {
            left: 15px;
            background: #FF5E5C;
          }

          .dot-orange {
            left: 35px;
            background: #FFBB4E;
          }

          .dot-green {
            left: 55px;
            background: #00C857;
          }
        }
      }
    }
  }
}

.codeMirror {
  margin: 20px 0;
  border-radius: 5px;
  
  :global {
    .code-wrap {
      .code-wrap-inner {
        -webkit-font-smoothing: auto;
        font-family: "Roboto Mono", "Menlo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        position: relative;
        border-radius: 5px;
        font-size: 16px;
        
        .code-dots {
          width: 100%;
          min-height: 42px;
          z-index: 10;
          border-radius: 5px 5px 0 0;
        }

        .dot {
          position: absolute;
          top: 15px;
          left: 15px;
          width: 12px;
          height: 12px;
          border-radius: 60px
        }

        .code-area {
          padding: 0 10px;

          .CodeMirror {
            border-radius: 5px;
            height: auto;
          }
        }
      }
    }
  }
}